<template>

    <el-card shadow="hover" header="消息列表" >
        <ul>
            <li v-for="item in notifications" :key="item.id">
                <div class="notification-item">
                    <span class="item-title">{{ item.title }}</span>
                    <span class="time">{{ item.time }}</span>
                </div>
            </li>
            <li :key="0">
                <div class="notification-item-more">
                    <p class="item-more">查看更多</p>
                </div>
            </li>
        </ul>
    </el-card>
</template>

<script setup>
// 导入响应式数据
import { ref } from "vue";

// 定义通知列表数据
const notifications = ref([
    {
        id: 1,
        title: "钟毅嘉在后台办理了“王磊”的入职钟毅嘉在后台办理了“王磊”的入职钟毅嘉在后台办理了“王磊”的入职钟毅嘉在后台办理了“王磊”的入职",
        time: "10分钟前",
    },
    {
        id: 2,
        title: "新订单2",
        time: "20分钟前",
    },
    {
        id: 3,
        title: "新评论3",
        time: "30分钟前",
    },
    {
        id: 4,
        title: "新评论4",
        time: "30分钟前",
    },
    {
        id: 5,
        title: "新评论5",
        time: "30分钟前",
    },
]);
</script>
<script>
export default {
    title: "我的消息",
    icon: "el-icon-chat-line-square",
    description: "展示最近的消息",
}
</script>

<style scoped lang="scss">
h3{
    border-bottom: 0;
    font-size: 17px;
    font-weight: bold;
    padding-bottom: 10px;
}

.notification-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;

    background-color:#f5f5f5;
    border-radius:10px;
    margin-bottom:10px;
    cursor:pointer;
}

/* 将文字改为黑色 */
.item-title {
    font-weight:bold;
    color: #555555;
    padding-right: 10px;

    /*最多显示两行并且超出部分显示省略号*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.notification-item-more {
    padding: 10px;
    text-align:center;
    background-color:#f5f5f5;
    border-radius:10px;
    margin-bottom:10px;
    cursor:pointer;
}

.time {
    color:black;
    /*禁止换行*/
    white-space:nowrap;
}

/* 添加过渡效果 */
.notification-item:hover {
    transform: scale(1.02);
    transition-duration: .5s;
}

/* 去掉item的圆点 */
ul{
    list-style:none;
}

/* 暗黑模式 */
html.dark {
    .notification-item-more, .notification-item {
        background-color:#2f2f2f;
    }
    .time,.item-title{
        color: #a0a0a0;
    }
}



</style>